<template>
  <div class="app-container">
    <div class="home">
      <ShortCut></ShortCut>
      <HeaderNav :type="selectedGoods.type" @type-selected="updateGoodsList"></HeaderNav>
      <Banner></Banner>
      <GoodsList :type="selectedGoods.type" />
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import HeaderNav from '@/components/common/HeaderNav.vue'
import Banner from '@/components/common/Banner.vue'
import GoodsList from '@/components/home/GoodList.vue';
import ShortCut from '@/components/common/ShortCut.vue';
import Footer from '@/components/common/Footer.vue';
import { reactive } from 'vue';

const selectedGoods = reactive({ type: '小编推荐' }); // 设置默认类型

function updateGoodsList({ type }) {
  selectedGoods.type = type;
  console.log(type)
}
</script>

<style lang="scss" scoped>
.home{
    // height: 900px;
    background-color: #ffffff;
}

</style>